import { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import * as Tabs from "react-native-collapsible-tab-view";
import apiService from "../services/ApiServices";
import FastImage from "react-native-fast-image";
import { __formatNumber } from "../common/utils";

type ProfileCartoonListViewProps = {
  uid: string;
};
const ProfileCartoonListView = ({ uid }: ProfileCartoonListViewProps) => {
  const [dataList, setDataList] = useState([]);

  const fetchData = async () => {
    const result = await apiService.getUserCartoonList(uid);
    setDataList(result?.data.list);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderItem = (data: any) => {
    const item = data.item;
    return (
      <View style={styles.contentView}>
        <FastImage
          resizeMode="cover"
          style={styles.coverImage}
          source={{ uri: item.banner }}
        ></FastImage>
        <View style={styles.rightView}>
          <View>
            <Text style={styles.nameLabel}>{item.name}</Text>
            <Text numberOfLines={2} style={styles.summaryLabel}>
              {item.summary}
            </Text>
          </View>
          <Text style={styles.numLabel}>
            {__formatNumber(item.useNum)}互动 · {__formatNumber(item.fansNum)}
            粉丝
          </Text>
        </View>
      </View>
    );
  };

  return <Tabs.FlatList data={dataList} renderItem={renderItem} />;
};

const styles = StyleSheet.create({
  contentView: {
    height: 100,
    backgroundColor: "white",
    marginHorizontal: 12,
    marginVertical: 8,
    borderRadius: 16,
    elevation: 1,
    shadowColor: "black",
    shadowRadius: 1,
    shadowOpacity: 0.1,
    shadowOffset: { width: 1, height: 1 },
    flexDirection: "row",
    justifyContent: "space-between",
  },
  coverImage: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginLeft: 10,
    marginTop: 10,
    resizeMode: "cover",
    overflow: "hidden",
  },
  rightView: {
    borderRadius: 16,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: "white",
    flex: 1,
    justifyContent: "space-between",
  },
  nameLabel: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: "bold",
    color: "black",
  },
  summaryLabel: {
    marginTop: 6,
    fontSize: 14,
    color: "rgba(0,0,0,0.67)",
  },
  nicknameLabel: {
    color: "rgba(0,0,0,.3)",
    marginTop: 4,
    fontSize: 14,
  },
  numLabel: {
    marginBottom: 6,
    fontSize: 14,
    color: "rgba(0,0,0,.45)",
  },
});

export default ProfileCartoonListView;
